<template>
  <div class="login">
    <div class="close">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <AuthInput
      type="text"
      placeholder="用户名/手机号码"
      rule="^\d{5,11}$"
      errMessage="请输入合法的用户名"
      @valchange="setUsername"
    />
    <AuthInput
      type="text"
      placeholder="昵称"
      rule="^\S{3,10}$"
      errMessage="请输入合法的昵称"
      @valchange="setNickname"
    />
    <AuthInput
      type="password"
      placeholder="密码"
      rule=".{1,6}"
      errMessage="请输入合法的密码"
      @valchange="setPassword"
    />
    <AuthBtn btnText="注册" @clickbtn="send" />
  </div>
</template>

<script>
import AuthInput from "@/components/AuthInput";
import AuthBtn from "@/components/AuthBtn";
export default {
  data() {
    return {
      username: "",
      nickname: "",
      password: ""
    };
  },
  components: {
    AuthInput,
    AuthBtn
  },
  methods: {
    setUsername(username) {
      this.username = username;
    },
    setNickname(nickname) {
      this.nickname = nickname;
    },
    setPassword(password) {
      this.password = password;
    },
    send() {
      if (!this.username || !this.password || !this.nickname) {
        this.$toast.fail("请输入信息");
        return;
      }
      //   console.log("注册按钮");
      //   console.log("用户名:" + this.username);
      //   console.log("昵称:" + this.nickname);
      //   console.log("密码:" + this.password);
      this.$axios({
        url: "/register",
        method: "POST",
        data: {
          username: this.username,
          password: this.password,
          nickname: this.nickname
        }
      })
        .then(res => {
          // console.log(res.data);
          if (res.data.message == "注册成功") {
            this.$toast.success("注册成功");
          }
        })
        .catch(err => {
          this.$toast.fail("系统错误");
        });
    }
  }
};
</script>

<style lang='less' scoped>
.login {
  background-color: #f2f2f2;
  .close {
    margin: 5.556vw;
    span {
      font-size: 7.778vw;
      font-weight: 700;
    }
  }
  .logo {
    span {
      display: block;
      text-align: center;
      font-size: 38.889vw;
      color: #d81e06;
    }
  }
}
</style>